<template>
  <!-- 规格-模态层弹窗 -->
  <view
    class="popup spec show"
    v-if="value === 'show'"
    @touchmove.stop.prevent="stopPrevent"
    @tap="hideSpec"
  >
    <!-- 遮罩层 -->
    <view class="mask" @tap="hideSpec"> </view>
    <view class="layer" @tap.stop="stopPrevent">
      <slot name="popup"> </slot>
      <view class="select-title">{{title}} </view>
      <view class="select-box-wrapper">
        <view
          class="select-item"
          v-for="(item, index) in list"
          :key="index"
          :class="[currentIndex === index ? 'active' : '']"
          @tap="handleTap(index)"
        >
          {{item.name}}
        </view>
      </view>
      <view class="btn-wrapper" @tap="confirm"> 确定 </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["level", "list"],
  data() {
    return {
      currentIndex: 0,
      value:"none",
      pruduct:this.list[0]
    };
  },
  methods: {
    stopPrevent() {},
    showPopup(currentIndex){
       this.value = "show";
       this.currentIndex = currentIndex;
    },
    hideSpec() {
      setTimeout(() => {
         this.value = "none";
        this.$emit("closepop");
      }, 250);
    },
    //切换模态框的子选项
    handleTap(index) {
      this.pruduct = this.list[index]
      this.currentIndex = index;
    },
    confirm() {
      this.value = "none";
      this.$emit("closepop", this.pruduct); //
    },
  },
  computed:{
    title(){
        return this.level ==="1"?"选择一级分类":"请选择月份";
    }
  },
};
</script>

<style lang="scss" scoped>
.popup .layer {
  position: fixed;
  z-index: 101;
  bottom: 0;
  width: 100%;
  min-height: 475upx;
  border-radius: 10upx 10upx 0px 0px;
  background-color: #fff;
  .select-title {
    font-size: 32upx;
    font-weight: bold;
    font-family: PingFang SC;
    text-align: center;
    margin: 28upx 0;
  }
  .select-box-wrapper {
    display: flex;
    justify-content: flex-start;
    padding: 0 0 0 30upx;
    flex-wrap: wrap;
    box-sizing: border-box;
    .select-item {
      width: 159upx;
      box-sizing: border-box;
      margin-bottom: 18upx;
      height: 58upx;
      line-height: 58upx;
      text-align: center;
      margin-right: 18upx;
      background: #eeeeee;
      border-radius: 10upx;
      font-size: 24upx;
      font-weight: 500;
      color: #333333;
      &.active {
        background: #f91c1c;
        color: #ffffff;
      }
    }
  }
  .btn-wrapper {
    position: absolute;
    width: 690upx;
    text-align: center;
    line-height: 80upx;
    font-size: 30upx;
    color: #fff;
    margin: 0 33upx;
    height: 80upx;
    background: #f91c1c;
    border-radius: 40upx;
    bottom: 9upx;
  }
}
</style>
